<template>
  <div class="out_container">
    <button v-model="showWord" @click="isShowPic" class="button">
      {{ showWord }}
    </button>
    <div class="container" v-show="isShow">
      <h1>所有图片</h1>
      <div v-for="item in floorList" class="showImg">
        <img :key="item.id" :src="item.imgUrl" class="floor_img" />
        <i ref="i" class="el-icon-star-off li" @click="collect"></i>
      </div>
      <Upload class="test" />
    </div>
  </div>
</template>

<script>
import Upload from "../Upload";
import { mapState } from "vuex";
export default {
  name: "Floor",
  // props: ["list"], //接收父传过来的数据
  components: { Upload },
  data() {
    return {
      isShow: true,
      showWord: "隐藏所有图片",
      currentIndex: "", //点击的相册的索引值
    };
  },
  watch: {
    // 当每一次切换相册的时候，收藏图标都要变成对应相册原来的图标（未实现）
    // 退而求再其次，每次切换的时候将当前相册的所有图标都变为未收藏
    currentIndex() {
      this.$refs.i.forEach((item) => {
        item.className = "el-icon-star-off li";
      });
    },
    /*  currentIndex() {
      this.$store.dispatch("getFloorList", this.currentIndex);
    }, */
  },
  mounted() {
    // 接收兄弟组件Nav传递的参数（表示当前点击的是哪个相册索引）
    this.$bus.$on("changeIndex", (data) => {
      this.currentIndex = data;
    });
  },
  methods: {
    // 是否展示所有图片的方法
    isShowPic() {
      this.isShow = !this.isShow;
      if (this.isShow) this.showWord = "隐藏所有图片";
      else this.showWord = "显示所有图片";
    },
    // 点击收藏图片,改变该图标
    collect(e) {
      // console.log(typeof e.target.className)
      var allClassName = e.target.className.split(" ");
      if (allClassName.indexOf("el-icon-star-off") != -1) {
        allClassName.splice(allClassName.indexOf("el-icon-star-off"), 1); //删除该类名
        allClassName.push("el-icon-star-on"); //添加表示已收藏的类名
      } else if (allClassName.indexOf("el-icon-star-on") != -1) {
        allClassName.splice(allClassName.indexOf("el-icon-star-on"), 1); //删除该类名
        allClassName.push("el-icon-star-off"); //添加表示未收藏的类名
      }
      e.target.className = allClassName.join(" ");
    },
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
};
</script>

<style  lang="less" >
.out_container {
  margin-left: 60px;
  margin-top: 20px;
  .button {
    width: 120px;
    height: 40px;
    border: none;
    background-color: rgba(135, 206, 235,.4);
    font-size: 18px;
    border-radius: 15px;
  }
  .container {
    width: 100%vw;
    overflow: hidden;
    h1 {
      font-size: 28px;
      font-family: STXingkai;
      margin-left: 15px;
      font-weight: normal;
      margin-bottom: 2px;
    }
    .showImg {
      display: inline-block;
      float: left;
      .floor_img {
        width: 250px;
        height: 180px;
        margin: 0 3px;
        border: 4px solid skyblue;
      }
      .li {
        position: relative;
        top: -10px;
        right: 35px;
        z-index: 99;
      }
      .el-icon-star-on {
        //重新给已收藏的图标赋新的颜色
        color: #ffd000;
      }
    }
    .showImg > img:hover {
      opacity: 0.7;
    }
    .test {
      float: left;
    }
  }
}
</style>
